<!-- 折叠菜单 -->
<template>
    <el-tooltip content="暗黑模式" placement="bottom">
        <label class="switch" v-if="type  === 'switch'">
            <input type="checkbox" :checked="SettingStore.dark === 'dark'" @change="change($event)">
            <span class="slider"></span>
        </label>
        <div :class="`Darkicon ${SettingStore.dark === 'dark'?'dark':'light'}`" v-else @click="change($event)"></div>
    </el-tooltip>
</template>
<script lang='ts' setup>
import { useSetting } from '@/pinia';

const SettingStore = useSetting();
const change = (e: any) => {
    SettingStore.dark === "light" ? SettingStore.dark = "dark" : SettingStore.dark = "light"
    SettingStore.setDark()
}

interface Type {
    type:"switch" | "icon"
}
withDefaults(defineProps<Type>(),{
    type:"switch"
})
</script>
<style lang="less" scoped>
.Darkicon {
    height: 1.3rem;
    width: 1.3rem;
    border-radius: 20px;
    transition: all 1s;
    margin: 10px;
    cursor: pointer;
}
.dark {
    background: transparent;
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -5px 0 0 #a3dafb;
}
.light {
    background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
}

.switch {
    /* --moon-mask: ; */
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
    margin: 10px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ddd;
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    border-radius: 20px;
    left: 5px;
    bottom: 3px;
    background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
    ;
    transition: .4s;
}

input:checked+.slider {
    background-color: #303136;
}

input:checked+.slider:before {
    transform: translateX(22px);
    background: #303136;
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -5px 0 0 #a3dafb;
}
</style>